<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

var watchID ='';
$(function(){
//accelerometer
	document.addEventListener("deviceready", onDeviceReady, false);

    // 加载完成
    function onDeviceReady() {
    	var options = { frequency: 3000 };  // Update every 3 seconds
		watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    	$('#clearWatch').click(function(){
	    	  stopWatch();
	    })
    }
})    
    
    
    
    //成功的回调函数
	function onSuccess(acceleration) {	          
	    var str =  'X 轴及加速度: ' + acceleration.x + '\n' +
	          'Y 轴及加速度: ' + acceleration.y + '\n' +
	          'Z 轴及加速度: ' + acceleration.z + '\n' +
	          'Timestamp: '      + acceleration.timestamp + '\n'; 
	              
	    $("#watchAcceleration").text(str);      
	};
	
	//失败的回调函数
	function onError() {
	    alert('onError!');
	};
    
    
    function stopWatch() {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    }
    
    



</script>

</head> 
<body>
<div data-role="page">
		<div data-role="header">
			<h1>PhoneGap100实战</h1>
		</div>
		<div data-role="content">
			<div id="watchAcceleration">加速度检测中</div>
			<a data-role="button" href="#" id="clearWatch">取消检测</a>		
		</div>		
		<div data-role="footer">
			<h4>&nbsp;</h4>
		</div>
</div>

</body>
</html>
